<template>
  <view class="result-container">
    <empty-list v-if="isEmpty"></empty-list>
    <mescroll-body v-else ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
      <block v-for="(item, index) in historyResult" :key="index">
      <view class="result-item" @click="onClickToDetail(item)">
        <history-item-1
          :data="item"
          v-if="!item.pic_list || item.pic_list.length === 0"
        />
        <history-item-2 :data="item" v-else-if="item.pic_list?.length === 1" />
        <history-item-3 :data="item" v-else />
      </view>
    </block>
    </mescroll-body>
    
    <!-- <view style="color:brown">brown</view> -->
  </view>
  
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { getSearchResultAPI } from "../../apis/search";
import historyItem1 from "../history-item-1/history-item-1.vue";
import EmptyList from '../empty-list/empty-list.vue';
export default {
  components: { historyItem1, EmptyList },
  name: "search-result-list",
  mixins:[MescrollMixin],
  props: {
    searchStr: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      page: 1,
      historyResult: [],
      isInit:true,
      mescroll:null,
      isEmpty:false
    };
  },
  // created() {
  //   this.loadSearchResult();
  // },
  mounted(){
    this.mescroll = this.$refs.mescrollRef.mescroll
  },
  methods: {
    //首次加载回调
    async mescrollInit(){
      // console.log('init');
      await this.loadSearchResult()
      this.isInit = false
      this.mescroll.endSuccess()
    },

    //上拉刷新回调
    async downCallback(){
      // console.log('down');
      if(this.isInit) return
      this.page++
      await this.loadSearchResult()
      this.mescroll.endSuccess()
    },

    //下拉刷新回调
    async upCallback(){
      // console.log('up');
      if(this.isInit) return
      this.page = 1
      await this.loadSearchResult()
      this.mescroll.endSuccess()
    },

    
    async loadSearchResult() {
      const { data: res } = await getSearchResultAPI({
        p: this.searchStr,
        q: this.page,
      });
      res.list.forEach(item => {
        item.body = item.body.replace(/<em>/g,"<em style='color:#f94d2a'>")
        item.description = item.description.replace(/<em>/g,"<em style='color:#f94d2a'>")
      });
      // this.historyResult = []
      this.historyResult = [...this.historyResult, ...res.list];
      // console.log(this.historyResult);
      if(this.historyResult.length === 0){
        this.isEmpty=true
      }
    },
    onClickToDetail(item){
      uni.navigateTo({url:`/subpkg/pages/blog-detail/blog-detail?author=${item.author}&article_di=${item._id}`})
    }
  },
};
</script>

<style lang="scss" scoped>
.result-container {
  padding: 15px;
  box-sizing: border-box;
  .result-item{
    margin-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
  }
}
</style>
